import React, { Component } from 'react'
import {checkToken} from '@/assets/js/hoc'
import classnames from 'classnames'
import styles from './index.module.scss'
import { SwipeAction, List, Toast,Popover } from 'antd-mobile'
import ctx from '@/assets/js/ctx'
const Item = Popover.Item;
@checkToken


class Aboutme extends Component {

    static contextType = ctx
    constructor(){
        super()

        this.state = {
            token:'',
            userInfo:{},
            userCenter:[
                {
                    icon:'icon-xiazaihuancun',
                    title:'离线缓存'
                },
                {
                    icon:'icon-lishijilu',
                    title:'历史记录'
                },
                {
                    icon:'icon-wodeshoucang',
                    title:'我的收藏'
                },
                {
                    icon:'icon-wodeguanzhu',
                    title:'我的关注'
                },
                {
                    icon:'icon-shaohouzaikan',
                    title:'稍后再看'
                },
                {
                    icon:'icon-qianbao',
                    title:'我的钱包'
                },
                {
                    icon:'icon-BMLdingdan',
                    title:'BW商城'
                },
                {
                    icon:'icon-chuangzuozhongxin',
                    title:'创作中心'
                }
            ],
            userServer:[
                {
                    icon:'icon-wodedahuiyuan',
                    title:'大会员'
                },                
                {
                    icon:'icon-mianliuliangfuwu',
                    title:'看视频免流量'
                },                
                {
                    icon:'icon-kefu',
                    title:'我的客服'
                },                
            ],
            favoriteList:[],

            visible: false,
            selected: '',
        }
    }

    

    reqUsetrInfo = () =>{
        const {token} = this.state
        this.context.axios.post('/bulubulu/api/user/t/info',{
            token
        })
        .then(({code,msg,info}) => {
            if(code == 1){
                this.setState({
                    userInfo:info
                })
            }else{
                Toast.fail(msg)
            }
        })
    }

    reqFavoriteList = () =>{
        const {token} = this.state
        this.context.axios.post('/bulubulu/api/favorite/t/list',{
            token
        })
        .then(({code,msg,list}) => {
            if(code == 1){
                this.setState({
                    favoriteList:list
                })
            }else{
                Toast.fail(msg)
            }
        })
    }

    deleteItem = (idx) => {
        const {token,favoriteList} = this.state
        this.context.axios.post('/bulubulu/api/favorite/t/del',{
            token,
            aid:favoriteList[idx].aid
        })
        .then(({code,msg}) => {
            if(code == 1){
                favoriteList.splice(idx,1)
                this.setState({
                    favoriteList
                })
            }else{
                Toast.fail(msg)
            }
        })
    }

    onSelect = (opt) => {
        if(opt.key == 4){
            localStorage.setItem('token','')
            location.reload()
        }
        this.setState({
          visible: false,
          selected: opt.props.value,
        });
    };

    handleVisibleChange = (visible) => {
        this.setState({
            visible,
          });
    }
    showMask = () =>{
        this.setState({
            visible:true
        });
    }

    render() {
        const {commonUrl} = this.context
        const {userInfo,userCenter,userServer,favoriteList} = this.state
        const {deleteItem,showMask} = this
        const toFixed1 = num =>{
            if(num >10000){
                num = num /10000
                return num.toFixed(1) + '万'
            }
            return parseInt(num)
        }
        return (
            <div className={styles.userInfo}>
                <div className={styles.pos}>
                <div className={classnames(styles.userTop,'bgcolor')}>
                    <div className={styles.someIcon}>
                        <i className={classnames("iconfont"," icon-erweima",styles.topicon)}></i>
                        <i className={classnames("iconfont","iconfont icon-zhuti",styles.topicon)}></i>
                        <i className={classnames("iconfont","iconfont icon-shezhi1",styles.topicon)} onClick={showMask}>
                            <Popover mask
                                overlayClassName="fortest"
                                overlayStyle={{ color: 'currentColor' }}
                                visible={this.state.visible}
                                overlay={[
                                    (<Item key="4" value="退出" data-seed="logId"><i className="iconfont icon-tuichu"></i>退出</Item>)
                                ]}
                                align={{overflow: { adjustY: 0, adjustX: 0 },offset: [-10, 0],}}
                                onVisibleChange={this.handleVisibleChange}
                                onSelect={this.onSelect}
                            >
                                <div style={{height: '100%',padding: '0 15px',marginRight: '-15px',display: 'flex',alignItems: 'center',}}></div>
                            </Popover>
                        </i>
                    </div>
                    <div className={styles.userHeader}>
                        <div className={styles.headerImg}>
                            <img className={styles.img} src='https://image3.ichuanyi.cn/group2/M00/2A/91/CgAANVfYsokEAAAAAAAAACxXdPA600.jpg?imageMogr/v2/auto-orient/thumbnail/130x/quality/60/format/jpg' alt="太美了不能显示" />
                        </div>
                        <div className={styles.userdetail}>
                            <div className={styles.userName}>{userInfo.username} <i className={classnames('iconfont','icon-ic_userlevel_',styles.level)}></i></div>
                            <span className={styles.userRank}>正式会员</span>
                            <div style={{marginTop:".1rem"}}>
                                <span className={styles.userAsset}>B币：0</span>
                                <span className={styles.userAsset}>硬币：6</span>
                            </div>
                        </div>
                        <i className={classnames('iconfont','icon-gengduo')} style={{color:'#fff'}}></i>
                    </div>
                </div>
                <ul className={styles.userFollow}>
                    <li>
                        <p className={styles.num}>0</p>
                        <p>动态</p>
                    </li>
                    <li>
                        <p className={styles.num}>0</p>
                        <p>关注</p>
                    </li>
                    <li>
                        <p className={styles.num}>0</p>
                        <p>粉丝</p>
                    </li>
                </ul>
            </div>
                <div className={styles.formGroup}>
                    <h3 className={styles.fromTitle}>个人中心</h3>
                    <ul className={styles.groupList}>
                        {userCenter.map((e,i) => <li key={i} className={styles.fromItem}> 
                            <i className={classnames('iconfont',e.icon,styles.fromicon,styles.blueColor)}></i>
                            <p className={styles.title}>{e.title}</p>
                        </li> )                         
                        }
                        
                    </ul>
                </div>
                <div className={styles.formGroup}>
                    <h3 className={styles.fromTitle}>我的服务</h3>
                    <ul className={styles.groupList}>
                        {userServer.map((e,i) => <li key={i} className={styles.fromItem}> 
                            <i className={classnames('iconfont',e.icon,styles.fromicon,styles.pinkColor)}></i>
                            <p className={styles.title}>{e.title}</p>
                        </li> )                         
                        }
                        
                    </ul>
                </div>
                <div className={styles.formGroup}>
                    <h3 className={styles.fromTitle}>我的收藏</h3>
                    <ul className={styles.favoriteInfo}>
                    { !favoriteList.length ? '还没有收藏哦~' :
                     favoriteList.map((e,i) =>     
                    <List key={i}>
                        <SwipeAction
                        style={{ backgroundColor: 'gray' }}
                        autoClose
                        right={[
                            {
                            text: '删除',
                            onPress: () =>deleteItem(i),
                            style: { backgroundColor: '#FF6666', color: 'white' },
                            },
                        ]}
                        >
                        <List.Item>
                        <li  className={styles.similarItem}>
                            <img className={styles.similarVideoImg} src={commonUrl + e.pic} alt="" />
                                    
                            <div className={styles.similarInfo}>
                                <div className={classnames(styles.title,"ellipsis2")}>{e.title}</div>
                                <p className={classnames('iconfont','icon-UPzhu',styles.author)}>{e.author}</p>
                                <div>
                                    <span className={classnames('iconfont','icon-bofangshu',styles.play)}>{toFixed1(e.play)}</span>
                                    <span className={classnames('iconfont','icon-danmushu',styles.video_review)}>{toFixed1(e.video_review)}</span>
                                </div>
                            </div>
                        </li>
                        </List.Item>
                        </SwipeAction>
                    </List>)}
                    </ul>
                </div>
            </div>
        )
    }

    componentDidMount(){
        const token = localStorage.getItem('token')
        this.setState({
            token
        },() =>{
           this.reqUsetrInfo() 
           this.reqFavoriteList()
        })

        
    }
}

export default Aboutme
